@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, Arial, sans-serif;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

div,
li,
ul {
  box-sizing: border-box; }

li,
ul {
  list-style: none; }

body,
html {
  height: 100%; }

body {
  overflow-x: hidden; }
  body::-webkit-scrollbar {
    display: none; }

.wave {
  position: relative;
  width: 150px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-size: 28px;
  /* 波纹效果 */ }
  .wave .circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0; }
  .wave.ripple.danger {
    color: #d8496a; }
    .wave.ripple.danger .circle {
      border-color: #d8496a; }
    .wave.ripple.danger .bar {
      background: #d8496a; }
      .wave.ripple.danger .bar:before {
        background: -webkit-linear-gradient(rgba(255, 255, 255, 0.1), #d8496a);
        background: linear-gradient(rgba(255, 255, 255, 0.1), #d8496a); }
  .wave.ripple.green {
    color: #6be5a9; }
    .wave.ripple.green .circle {
      border-color: #6be5a9; }
    .wave.ripple.green .bar {
      background: #6be5a9; }
      .wave.ripple.green .bar:before {
        background: -webkit-linear-gradient(rgba(255, 255, 255, 0.1), #6be5a9);
        background: linear-gradient(rgba(255, 255, 255, 0.1), #6be5a9); }
  .wave.ripple.warning {
    color: #eede3f; }
    .wave.ripple.warning .circle {
      border-color: #eede3f; }
    .wave.ripple.warning .bar {
      background: #eede3f; }
      .wave.ripple.warning .bar:before {
        background: -webkit-linear-gradient(rgba(255, 255, 255, 0.1), #eede3f);
        background: linear-gradient(rgba(255, 255, 255, 0.1), #eede3f); }
  .wave.ripple.normal {
    color: #389df3; }
    .wave.ripple.normal .circle {
      border-color: #389df3; }
    .wave.ripple.normal .bar {
      background: #389df3; }
      .wave.ripple.normal .bar:before {
        background: -webkit-linear-gradient(rgba(255, 255, 255, 0.1), #389df3);
        background: linear-gradient(rgba(255, 255, 255, 0.1), #389df3); }
  .wave.ripple .circle {
    width: calc(100% - 6px);
    /* 减去边框的大小 */
    height: calc(100% - 6px);
    /* 减去边框的大小 */
    border: 3px solid #fff; }
    .wave.ripple .circle:first-child {
      -webkit-animation: circle-opacity 2s infinite;
              animation: circle-opacity 2s infinite; }
    .wave.ripple .circle:nth-child(2) {
      -webkit-animation: circle-opacity 2s infinite;
              animation: circle-opacity 2s infinite;
      -webkit-animation-delay: .3s;
              animation-delay: .3s; }
    .wave.ripple .circle:nth-child(3) {
      -webkit-animation: circle-opacity 2s infinite;
              animation: circle-opacity 2s infinite;
      -webkit-animation-delay: .6s;
              animation-delay: .6s; }
  .wave.ripple .bar {
    position: relative;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
    border-radius: 50%; }
    .wave.ripple .bar:before {
      content: ' ';
      position: absolute;
      left: 50%;
      bottom: 50px;
      -webkit-transform: translate(-50%, 0);
              transform: translate(-50%, 0);
      display: block;
      width: 30px;
      height: 200px;
      border-radius: 30px; }

@-webkit-keyframes circle-opacity {
  from {
    opacity: 1;
    -webkit-transform: scale(0.25);
            transform: scale(0.25); }
  to {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes circle-opacity {
  from {
    opacity: 1;
    -webkit-transform: scale(0.25);
            transform: scale(0.25); }
  to {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1); } }

.mapLegend {
  position: absolute;
  left: -210px;
  bottom: 50px; }
  .mapLegend h5 {
    margin-bottom: 2px;
    color: #fff; }
  .mapLegend ul {
    margin-bottom: 2px; }
    .mapLegend ul li {
      width: 20px;
      height: 15px;
      margin-bottom: 1px;
      display: block; }

.next {
  position: fixed;
  top: -50px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  cursor: pointer;
  z-index: 1; }
  .next div {
    margin: 0 auto 5px;
    height: 2px;
    border-radius: 5px;
    background: #2fd5d3; }

@-webkit-keyframes nextFlash {
  from {
    background-color: #4cfffe; }
  to {
    background-color: #2487a3; } }

@keyframes nextFlash {
  from {
    background-color: #4cfffe; }
  to {
    background-color: #2487a3; } }
    .next div:nth-child(1) {
      width: 10px;
      -webkit-animation: nextFlash 0.5s linear infinite alternate;
              animation: nextFlash 0.5s linear infinite alternate; }
    .next div:nth-child(2) {
      width: 24px;
      -webkit-animation: nextFlash 0.5s linear 0.2s infinite alternate;
              animation: nextFlash 0.5s linear 0.2s infinite alternate; }
    .next div:nth-child(3) {
      width: 34px;
      -webkit-animation: nextFlash 0.5s linear 0.3s infinite alternate;
              animation: nextFlash 0.5s linear 0.3s infinite alternate; }
    .next div:nth-child(4) {
      width: 44px;
      -webkit-animation: nextFlash 0.5s linear 0.4s infinite alternate;
              animation: nextFlash 0.5s linear 0.4s infinite alternate; }
    .next div:nth-child(5) {
      width: 54px;
      -webkit-animation: nextFlash 0.5s linear 0.5s infinite alternate;
              animation: nextFlash 0.5s linear 0.5s infinite alternate; }

.mainSearch {
  position: fixed;
  left: 50%;
  bottom: -100%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  width: 580px;
  height: 60px;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  z-index: 10; }
  .mainSearch.show {
    bottom: 30px; }
  .mainSearch .lineBox {
    position: absolute;
    left: 0;
    top: -4px;
    bottom: 0;
    width: 100%; }
    .mainSearch .lineBox:before {
      content: ' ';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      border-radius: 10px;
      border: 2px solid #33fefa;
      -webkit-animation: borderFlash 0.5s linear infinite alternate;
              animation: borderFlash 0.5s linear infinite alternate; }

@-webkit-keyframes borderFlash {
  from {
    border-color: #33fefa; }
  to {
    border-color: #2487a3; } }

@keyframes borderFlash {
  from {
    border-color: #33fefa; }
  to {
    border-color: #2487a3; } }
    .mainSearch .lineBox:after {
      content: ' ';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      border-radius: 10px;
      background: -webkit-radial-gradient(#1c3d40, #1f4d50);
      background: radial-gradient(#1c3d40, #1f4d50);
      opacity: 0.4; }
    .mainSearch .lineBox .line {
      position: absolute;
      z-index: 1;
      width: 100%;
      height: 100%; }
      .mainSearch .lineBox .line:after, .mainSearch .lineBox .line:before {
        content: ' ';
        position: absolute;
        display: block;
        background: #1c3d40;
        z-index: 1; }
      .mainSearch .lineBox .line.landscape:after, .mainSearch .lineBox .line.landscape:before {
        left: 9px;
        right: 9px;
        height: 4px; }
      .mainSearch .lineBox .line.landscape:before {
        top: 0; }
      .mainSearch .lineBox .line.landscape:after {
        bottom: 0; }
      .mainSearch .lineBox .line.portrait:after, .mainSearch .lineBox .line.portrait:before {
        top: 9px;
        bottom: 9px;
        width: 4px; }
      .mainSearch .lineBox .line.portrait:before {
        left: 0; }
      .mainSearch .lineBox .line.portrait:after {
        right: 0; }
  .mainSearch .inputBox {
    position: absolute;
    left: 0;
    bottom: 2px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    z-index: 2;
    border-radius: 10px; }
    .mainSearch .inputBox .input {
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      padding-right: 100px;
      padding-left: 15px;
      line-height: 60px;
      border-radius: 10px;
      background: none;
      outline: none;
      border: none;
      color: #fff;
      font-size: 18px; }
      .mainSearch .inputBox .input:focus {
        box-shadow: 0 0 10px #fff; }
      .mainSearch .inputBox .input::-webkit-input-placeholder {
        color: #999;
        font-size: 18px; }
    .mainSearch .inputBox .searchBtn {
      position: absolute;
      right: 15px;
      top: 14px;
      width: 45px;
      height: 35px;
      background: url("../css/images/search.png") no-repeat;
      cursor: pointer; }
    .mainSearch .inputBox .dataList {
      position: absolute;
      bottom: -1000px;
      left: 0;
      overflow: hidden;
      padding-bottom: 5px;
      width: 100%;
      border-radius: 10px;
      z-index: 2; }
      .mainSearch .inputBox .dataList.show {
        bottom: 63px; }
      .mainSearch .inputBox .dataList:before {
        content: ' ';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        border-radius: 10px;
        background: rgba(28, 61, 64, 0.9); }
      .mainSearch .inputBox .dataList li {
        position: relative;
        overflow: hidden;
        padding: 0 10px;
        height: 35px;
        line-height: 35px;
        color: #fff;
        cursor: pointer; }
        .mainSearch .inputBox .dataList li:hover {
          background: rgba(255, 255, 255, 0.1); }
        .mainSearch .inputBox .dataList li .detail {
          float: right;
          color: #3576a6;
          cursor: pointer; }
  .mainSearch .serach {
    width: 40px;
    height: 40px; }

.roulette {
  position: fixed;
  left: 50%;
  bottom: 0;
  overflow: hidden;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  background: url("../css/images/pannelBg.png") center top no-repeat;
  width: 940px;
  height: 143px;
  z-index: 10; }
  .roulette.hide {
    bottom: -150px; }
  .roulette .muder {
    position: absolute;
    left: 50%;
    top: 70%;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    width: 900px;
    height: 900px;
    border-radius: 100%;
    z-index: 1; }
    .roulette .muder .eye {
      position: absolute;
      left: 50%;
      margin-top: 2px;
      width: 46px;
      height: 39px;
      background: url("../css/images/eye.png") center no-repeat;
      z-index: 1;
      cursor: pointer;
      -webkit-animation: animateEye 0.5s linear infinite alternate;
              animation: animateEye 0.5s linear infinite alternate; }

@-webkit-keyframes animateEye {
  from {
    -webkit-transform: translate(-50%, 0) scale(0.95);
            transform: translate(-50%, 0) scale(0.95); }
  to {
    -webkit-transform: translate(-50%, 0) scale(1);
            transform: translate(-50%, 0) scale(1); } }

@keyframes animateEye {
  from {
    -webkit-transform: translate(-50%, 0) scale(0.95);
            transform: translate(-50%, 0) scale(0.95); }
  to {
    -webkit-transform: translate(-50%, 0) scale(1);
            transform: translate(-50%, 0) scale(1); } }
  .roulette ul {
    position: relative;
    width: 940px;
    height: 940px;
    list-style: none;
    border-radius: 50%;
    overflow: hidden;
    -webkit-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out; }
    .roulette ul li {
      position: absolute;
      top: 0;
      left: 0;
      width: 470px;
      height: 470px;
      -webkit-transform-origin: 100% 100%;
              transform-origin: 100% 100%;
      overflow: hidden;
      color: #fff; }
      .roulette ul li.menu:hover span {
        text-shadow: 0 0 10px #ccc; }
      .roulette ul li.active span {
        color: #33fefa;
        text-shadow: 0 0 8px #33fefa;
        font-size: 22px; }
      .roulette ul li div {
        position: absolute;
        right: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
        -webkit-transform: skew(-72deg) rotate(-36deg);
                transform: skew(-72deg) rotate(-36deg);
        -webkit-transform-origin: 100% 100%;
                transform-origin: 100% 100%; }
        .roulette ul li div span {
          display: block;
          -webkit-transform: rotate(-45deg);
                  transform: rotate(-45deg);
          height: 100%;
          -webkit-transition: all 0.15s ease-in;
          transition: all 0.15s ease-in;
          line-height: 325px;
          text-align: center;
          font-size: 18px; }
          .roulette ul li div span a {
            cursor: pointer; }

.flexBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; }
  .flexBox > li {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1; }

.nineLayout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  .nineLayout li {
    position: relative;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33%;
            flex: 0 0 33.33%;
    padding-top: 33.33%; }

.flashSquare {
  position: relative; }
  .flashSquare .corner {
    position: absolute; }
    .flashSquare .corner:after, .flashSquare .corner:before {
      content: ' ';
      display: block;
      position: absolute;
      -webkit-animation: cornerFlash 1.5s linear infinite alternate;
              animation: cornerFlash 1.5s linear infinite alternate; }
    .flashSquare .corner:before {
      width: 9px;
      height: 1px; }
    .flashSquare .corner:after {
      width: 1px;
      height: 9px; }

@-webkit-keyframes cornerFlash {
  from {
    background-color: #00fffd; }
  to {
    background-color: transparent; } }

@keyframes cornerFlash {
  from {
    background-color: #00fffd; }
  to {
    background-color: transparent; } }
  .flashSquare .top {
    top: 0;
    left: 0; }
    .flashSquare .top:before {
      top: -1px; }
    .flashSquare .top:after {
      left: -1px; }
  .flashSquare .right {
    top: 0;
    right: 0; }
    .flashSquare .right:before {
      top: -1px;
      right: -1px; }
    .flashSquare .right:after {
      right: -1px; }
  .flashSquare .bottom {
    bottom: 0;
    right: 0; }
    .flashSquare .bottom:before {
      right: -1px;
      bottom: -1px; }
    .flashSquare .bottom:after {
      right: -1px;
      bottom: -1px; }
  .flashSquare .left {
    bottom: 0;
    left: 0; }
    .flashSquare .left:before {
      bottom: -1px; }
    .flashSquare .left:after {
      left: -1px;
      bottom: -1px; }

.dots {
  position: absolute;
  top: 7px;
  left: 210px; }
  .dots div {
    float: left;
    margin-right: 5px;
    width: 6px;
    height: 7px;
    -webkit-transform: skew(30deg, 0);
            transform: skew(30deg, 0);
    background: #2fd5d3; }

@-webkit-keyframes dotFlash {
  from {
    background-color: #2dc3c2; }
  to {
    background-color: #00fffd;
    box-shadow: 0 0 10px #fff; } }

@keyframes dotFlash {
  from {
    background-color: #2dc3c2; }
  to {
    background-color: #00fffd;
    box-shadow: 0 0 10px #fff; } }
    .dots div:nth-child(1) {
      width: 6px;
      -webkit-animation: dotFlash 0.5s linear infinite alternate;
              animation: dotFlash 0.5s linear infinite alternate; }
    .dots div:nth-child(2) {
      width: 5px;
      -webkit-animation: dotFlash 0.5s linear 0.2s infinite alternate;
              animation: dotFlash 0.5s linear 0.2s infinite alternate; }
    .dots div:nth-child(3) {
      width: 4px;
      -webkit-animation: dotFlash 0.5s linear 0.3s infinite alternate;
              animation: dotFlash 0.5s linear 0.3s infinite alternate; }
    .dots div:nth-child(4) {
      width: 3px;
      -webkit-animation: dotFlash 0.5s linear 0.4s infinite alternate;
              animation: dotFlash 0.5s linear 0.4s infinite alternate; }
    .dots div:nth-child(5) {
      width: 2px;
      -webkit-animation: dotFlash 0.5s linear 0.5s infinite alternate;
              animation: dotFlash 0.5s linear 0.5s infinite alternate; }
    .dots div:nth-child(6) {
      width: 1px;
      -webkit-animation: dotFlash 0.5s linear 0.6s infinite alternate;
              animation: dotFlash 0.5s linear 0.6s infinite alternate; }

.warningNum {
  margin: 0 0 10px 8px;
  color: #fff;
  font-family: "Microsoft YaHei";
  font-size: 16px; }
  .warningNum .num {
    margin-right: 20px;
    color: #eede3f;
    font-size: 36px; }

.percent {
  color: #33fefa;
  font-size: 24px; }
  .percent:after {
    display: inline-block;
    width: 10px;
    height: 10px; }
  .percent.up:after {
    content: '↑';
    color: #57dd94; }
  .percent.down:after {
    content: '↓';
    color: #de485d; }

.button {
  display: block;
  border-radius: 5px;
  padding: 10px 15px;
  text-align: center;
  color: #fff;
  font-size: 16px;
  cursor: pointer; }

.page,
.pageWrap {
  position: relative;
  -webkit-transform-origin: left top 0;
          transform-origin: left top 0;
  overflow: hidden;
  width: 1920px;
  height: 1080px;
  background: #1c2025; }

.page .container {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transition: all 1s;
  transition: all 1s; }

.page.page1Show .stage.stage1 .logo {
  opacity: 1; }

.page.page1Show .stage.stage1 .leftPannel {
  left: 35px;
  opacity: 1; }

.page.page1Show .stage.stage1 .next {
  top: auto;
  bottom: 5%;
  z-index: 2;
  -webkit-transition: all 1s linear 7s;
  transition: all 1s linear 7s; }

.page.page2Show .stage.stage2 .topTitle {
  top: 0; }

.page.page2Show .stage.stage2 .leftPannel {
  left: 35px;
  opacity: 1; }

.page.page2Show .stage.stage2 .rightPannel {
  right: 35px;
  opacity: 1; }

.page.page3Show .stage.stage3 {
  opacity: 1;
  z-index: 1; }
  .page.page3Show .stage.stage3 .topTitle {
    top: 0; }

.page.page3Show .container {
  opacity: 0;
  z-index: -1; }

.page.page4Show .stage.stage4 {
  opacity: 1;
  z-index: 1; }

.page.page4Show .leftPannel .left_bot .charts.chart2 {
  height: 300px; }

.page.page5Show .stage.stage5 {
  z-index: auto; }
  .page.page5Show .stage.stage5 .topTitle {
    top: 0; }
  .page.page5Show .stage.stage5 .leftPannel {
    left: 10px; }
  .page.page5Show .stage.stage5 .rightPannel {
    right: 10px; }

.page.page5Show .container {
  opacity: 1;
  z-index: auto; }

.page.page6Show .stage {
  z-index: auto; }
  .page.page6Show .stage.stage6 {
    z-index: auto; }
    .page.page6Show .stage.stage6 .topTitle {
      top: 0; }
    .page.page6Show .stage.stage6 .topPannel {
      top: 40px; }
    .page.page6Show .stage.stage6 .leftPannel {
      left: 10px; }
    .page.page6Show .stage.stage6 .rightPannel {
      right: 10px; }

.page.page6Show .container {
  opacity: 1;
  z-index: auto;
  background: url("../css/images/page6_bg.png") center no-repeat; }
  .page.page6Show .container > .container {
    background: transparent !important; }

.page.page7Show .stage.stage7 {
  opacity: 1;
  z-index: 1; }
  .page.page7Show .stage.stage7 .topTitle {
    top: 0; }
  .page.page7Show .stage.stage7 .topPannel {
    top: 40px; }

.page .number {
  background: url("../css/images/number.png") no-repeat;
  width: 25px;
  height: 38px;
  text-indent: -2000em;
  background-position-x: 6px; }
  .page .number.flip {
    -webkit-transition: 1s;
    transition: 1s;
    -webkit-transform: rotateY(720deg);
            transform: rotateY(720deg); }
  .page .number.num0 {
    background-position-y: 7px; }
  .page .number.num1 {
    background-position-y: -42px; }
  .page .number.num2 {
    background-position-y: -93px; }
  .page .number.num3 {
    background-position-y: -143px; }
  .page .number.num4 {
    background-position-y: -193px; }
  .page .number.num5 {
    background-position-y: -243px; }
  .page .number.num6 {
    background-position-y: -293px; }
  .page .number.num7 {
    background-position-y: -343px; }
  .page .number.num8 {
    background-position-y: -393px; }
  .page .number.num9 {
    background-position-y: -443px; }
  .page .number.dot {
    background-position-y: -497px; }

.page .stage {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0; }
  .page .stage .topTitle {
    position: absolute;
    left: 0;
    padding: 0 30px;
    width: 100%;
    height: 228px;
    background: url("../css/images/page2_titleBg.png") center no-repeat;
    z-index: 1;
    -webkit-transition: all 2s ease-in;
    transition: all 2s ease-in; }
    .page .stage .topTitle.backMode {
      background-image: url("../css/images/page2_titleBackBg.png"); }
      .page .stage .topTitle.backMode .back {
        z-index: 1; }
    .page .stage .topTitle .back {
      position: absolute;
      left: 50%;
      top: 55px;
      -webkit-transform: translate(-50%, 0);
              transform: translate(-50%, 0);
      width: 330px;
      height: 36px;
      z-index: -1;
      cursor: pointer; }
    .page .stage .topTitle div {
      margin: 15px 10px;
      padding: 0 10px;
      height: 30px;
      line-height: 30px;
      border-radius: 5px;
      background: rgba(9, 74, 110, 0.36);
      -webkit-transition: all 0.5s;
      transition: all 0.5s;
      color: #fff; }
    .page .stage .topTitle .area {
      float: left; }
      .page .stage .topTitle .area span {
        color: #33fefa; }
    .page .stage .topTitle .time {
      float: left; }
      .page .stage .topTitle .time:before {
        content: ' ';
        padding: 15px;
        background: url("../css/images/time.png") left center no-repeat; }
    .page .stage .topTitle .screen {
      float: right;
      cursor: pointer; }
      .page .stage .topTitle .screen:before {
        content: ' ';
        padding: 15px;
        background: url("../css/images/fullScreen.png") left center no-repeat; }
      .page .stage .topTitle .screen:hover {
        background: rgba(9, 74, 110, 0.8); }
    .page .stage .topTitle .screen,
    .page .stage .topTitle .time {
      font-size: 14px; }
  .page .stage .titleBar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: 40px; }
    .page .stage .titleBar:before {
      content: ' ';
      display: block;
      width: 35px;
      height: 35px;
      background-position: center;
      background-repeat: no-repeat; }
    .page .stage .titleBar.titleBar1:before {
      background-image: url("../css/images/titleico1.png"); }
    .page .stage .titleBar.titleBar2:before {
      background-image: url("../css/images/titleico2.png"); }
    .page .stage .titleBar.titleBar3:before {
      background-image: url("../css/images/titleico3.png"); }
    .page .stage .titleBar.titleBar4:before {
      background-image: url("../css/images/titleico4.png"); }
    .page .stage .titleBar .title {
      position: relative;
      padding-left: 20px;
      width: 655px;
      height: 51px;
      line-height: 51px;
      background: url("../css/images/titleBar.png") no-repeat;
      color: #fff;
      font-weight: normal;
      font-family: "Microsoft YaHei";
      font-size: 16px; }
      .page .stage .titleBar .title .topLine {
        position: absolute;
        left: 7px;
        top: -3px;
        width: 141px;
        height: 8px;
        background: url("../css/images/topLine.png") repeat-x; }
  .page .stage .leftPannel,
  .page .stage .rightPannel {
    position: absolute;
    top: 140px;
    z-index: 1; }
  .page .stage .bottomPannel,
  .page .stage .topPannel {
    position: absolute;
    width: 100%;
    left: 0;
    z-index: 1; }
  .page .stage .topPannel {
    top: 5px; }
  .page .stage .bottomPannel {
    bottom: 35px; }
  .page .stage .charts {
    position: relative; }
    .page .stage .charts .chart {
      width: 100%;
      height: 100%; }
  .page .stage.stage1 .logo {
    position: absolute;
    left: 40px;
    top: 35px;
    z-index: 2;
    width: 490px;
    height: 68px;
    background: url("../css/images/logo.png") no-repeat;
    opacity: 0;
    -webkit-transition: all 2s ease-in;
    transition: all 2s ease-in; }
  .page .stage.stage1 .leftPannel {
    left: -100%;
    top: 50%;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
    opacity: 0;
    -webkit-transition: all 2s ease-in;
    transition: all 2s ease-in;
    z-index: 5; }
    .page .stage.stage1 .leftPannel .content {
      padding-top: 10px;
      padding-left: 40px; }
      .page .stage.stage1 .leftPannel .content .animateNumber {
        display: inline-block;
        vertical-align: middle; }
        .page .stage.stage1 .leftPannel .content .animateNumber span {
          position: relative;
          display: inline-block;
          margin: 0 5px 0 0;
          width: 36px;
          height: 52px;
          line-height: 52px;
          border: 1px solid rgba(0, 0, 0, 0.5);
          background-color: #0c434a;
          text-align: center;
          font-size: 50px; }
          .page .stage.stage1 .leftPannel .content .animateNumber span.dot {
            width: 15px;
            border: none;
            background-position-x: -5px;
            background-color: transparent; }
      .page .stage.stage1 .leftPannel .content ul {
        overflow: auto; }
        .page .stage.stage1 .leftPannel .content ul li {
          float: left;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
              -ms-flex-direction: column;
                  flex-direction: column;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          margin: 10px 10px 10px 0; }
          .page .stage.stage1 .leftPannel .content ul li span {
            padding-bottom: 5px;
            color: #fff;
            font-size: 16px; }
          .page .stage.stage1 .leftPannel .content ul li p {
            color: #33fefa;
            line-height: 26px;
            font-family: "Microsoft YaHei";
            font-weight: bold;
            font-size: 26px; }
      .page .stage.stage1 .leftPannel .content .flashSquareBox {
        overflow: auto;
        width: 800px; }
        .page .stage.stage1 .leftPannel .content .flashSquareBox .flashSquare {
          width: 90px;
          height: 90px;
          border: 1px solid rgba(51, 254, 250, 0.15);
          background: rgba(0, 0, 0, 0.15); }
          .page .stage.stage1 .leftPannel .content .flashSquareBox .flashSquare p {
            -webkit-transition: all 1s ease-in;
            transition: all 1s ease-in; }
          .page .stage.stage1 .leftPannel .content .flashSquareBox .flashSquare.light p {
            text-shadow: 0 0 10px #33fefa; }
      .page .stage.stage1 .leftPannel .content .productBox li {
        padding: 0 20px;
        height: 78px;
        background: url("../css/images/line.png") no-repeat; }
  .page .stage.stage1 .next {
    top: auto;
    bottom: -100%; }
  .page .stage.stage2 .topTitle {
    top: -100%; }
  .page .stage.stage2 .titleBar {
    margin-top: 15px;
    background-color: rgba(0, 0, 0, 0.15); }
    .page .stage.stage2 .titleBar:before {
      display: none; }
    .page .stage.stage2 .titleBar .title {
      width: 480px; }
  .page .stage.stage2 .leftPannel,
  .page .stage.stage2 .rightPannel {
    top: 65px;
    opacity: 0;
    -webkit-transition: all 2s ease-in;
    transition: all 2s ease-in;
    z-index: 5; }
  .page .stage.stage2 .leftPannel {
    left: -100%; }
  .page .stage.stage2 .rightPannel {
    right: -100%; }
    .page .stage.stage2 .rightPannel .warningNum .percent {
      float: right;
      margin-right: 10px; }
    .page .stage.stage2 .rightPannel .mapLegend li {
      height: 100px;
      background: -webkit-linear-gradient(#d7191c, #fde468, #ffffbf, #abd9e9, #2c7bb6);
      background: linear-gradient(#d7191c, #fde468, #ffffbf, #abd9e9, #2c7bb6); }
  .page .stage.stage2 .content {
    overflow: hidden;
    padding: 5px 0 10px;
    background: rgba(0, 0, 0, 0.15); }
    .page .stage.stage2 .content .flexNum {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin: 0 0 10px; }
      .page .stage.stage2 .content .flexNum li {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        position: relative;
        text-align: center; }
        .page .stage.stage2 .content .flexNum li p {
          color: #fff;
          font-size: 16px; }
        .page .stage.stage2 .content .flexNum li span {
          color: #33fefa;
          font-size: 24px; }
        .page .stage.stage2 .content .flexNum li:nth-child(1):after, .page .stage.stage2 .content .flexNum li:nth-child(2):after {
          content: '';
          position: absolute;
          right: 0;
          top: 10px;
          width: 1px;
          height: 30px;
          background: #ccc; }
    .page .stage.stage2 .content .charts.chart1 {
      height: 195px; }
      .page .stage.stage2 .content .charts.chart1 .chart {
        width: 75%; }
      .page .stage.stage2 .content .charts.chart1:before {
        content: ' ';
        position: absolute;
        left: 0;
        top: 0;
        width: 75%;
        height: 100%;
        background: url("../css/images/page2_chart1Bg.png") center no-repeat;
        -webkit-animation: animateChart1Bg 1.5s linear infinite alternate;
                animation: animateChart1Bg 1.5s linear infinite alternate; }

@-webkit-keyframes animateChart1Bg {
  from {
    -webkit-transform: scale(0.85);
            transform: scale(0.85); }
  to {
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes animateChart1Bg {
  from {
    -webkit-transform: scale(0.85);
            transform: scale(0.85); }
  to {
    -webkit-transform: scale(1);
            transform: scale(1); } }
      .page .stage.stage2 .content .charts.chart1 .legend {
        position: absolute;
        right: 60px;
        top: 50%;
        -webkit-transform: translate(0, -50%);
                transform: translate(0, -50%); }
        .page .stage.stage2 .content .charts.chart1 .legend span {
          display: block;
          margin-bottom: 20px;
          color: #fff;
          font-size: 12px; }
          .page .stage.stage2 .content .charts.chart1 .legend span:before {
            content: ' ';
            display: inline-block;
            margin: 0 5px 0 0;
            width: 14px;
            height: 10px;
            border-radius: 3px;
            vertical-align: middle; }
          .page .stage.stage2 .content .charts.chart1 .legend span:nth-child(1):before {
            background: #70eca8; }
          .page .stage.stage2 .content .charts.chart1 .legend span:nth-child(2):before {
            background: #1a95ff; }
          .page .stage.stage2 .content .charts.chart1 .legend span:nth-child(3):before {
            background: #fbc701; }
          .page .stage.stage2 .content .charts.chart1 .legend span:nth-child(4):before {
            background: #eb3962; }
    .page .stage.stage2 .content .charts.chart2 {
      height: 220px; }
    .page .stage.stage2 .content .charts.chart3 {
      overflow: auto;
      margin-bottom: 10px; }
      .page .stage.stage2 .content .charts.chart3 .stage2Chart3_1,
      .page .stage.stage2 .content .charts.chart3 .stage2Chart3_2,
      .page .stage.stage2 .content .charts.chart3 .stage2Chart3_3 {
        float: left;
        width: 33.33%; }
        .page .stage.stage2 .content .charts.chart3 .stage2Chart3_1 .chart,
        .page .stage.stage2 .content .charts.chart3 .stage2Chart3_2 .chart,
        .page .stage.stage2 .content .charts.chart3 .stage2Chart3_3 .chart {
          position: relative;
          overflow: hidden;
          height: 95px; }
          .page .stage.stage2 .content .charts.chart3 .stage2Chart3_1 .chart:before,
          .page .stage.stage2 .content .charts.chart3 .stage2Chart3_2 .chart:before,
          .page .stage.stage2 .content .charts.chart3 .stage2Chart3_3 .chart:before {
            content: ' ';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: url("../css/images/page2_chart3_1.png") center no-repeat;
            -webkit-animation: animateChart3Bg 5s linear infinite;
                    animation: animateChart3Bg 5s linear infinite; }

@-webkit-keyframes animateChart3Bg {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  to {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg); } }

@keyframes animateChart3Bg {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  to {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg); } }
        .page .stage.stage2 .content .charts.chart3 .stage2Chart3_1 p,
        .page .stage.stage2 .content .charts.chart3 .stage2Chart3_2 p,
        .page .stage.stage2 .content .charts.chart3 .stage2Chart3_3 p {
          text-align: center;
          color: #fff; }
    .page .stage.stage2 .content .charts.chart4 {
      height: 230px; }
    .page .stage.stage2 .content .charts.chart5 {
      height: 300px; }
    .page .stage.stage2 .content .charts.chart6 {
      height: 150px; }
    .page .stage.stage2 .content .charts.chart7 {
      height: 260px; }
  .page .stage.stage3 {
    opacity: 0;
    z-index: -1;
    background: url("../css/images/page3_bg.png") center no-repeat;
    -webkit-transition: all 2s;
    transition: all 2s; }
    .page .stage.stage3 .topTitle {
      top: -100%; }
    .page .stage.stage3 .platform {
      position: relative;
      margin: 110px 0 0 112px;
      width: 1241px;
      height: 647px;
      background: url("../css/images/page3_stage.png") center no-repeat; }
      .page .stage.stage3 .platform .lines {
        overflow: hidden; }
        .page .stage.stage3 .platform .lines li {
          position: absolute;
          width: 32px;
          height: 84px;
          background: url("../css/images/page3_lineDot.png") center no-repeat; }
          .page .stage.stage3 .platform .lines li:nth-child(1) {
            left: 67px;
            -webkit-animation: runLine1 3s linear infinite;
                    animation: runLine1 3s linear infinite; }

@-webkit-keyframes runLine1 {
  0% {
    top: 540px;
    opacity: 0; }
  5% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    top: 210px;
    opacity: 0; } }

@keyframes runLine1 {
  0% {
    top: 540px;
    opacity: 0; }
  5% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    top: 210px;
    opacity: 0; } }
          .page .stage.stage3 .platform .lines li:nth-child(2) {
            right: 301px;
            -webkit-animation: runLine2 3s linear infinite;
                    animation: runLine2 3s linear infinite; }

@-webkit-keyframes runLine2 {
  0% {
    top: 256px;
    opacity: 0; }
  5% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    top: 166px;
    opacity: 0; } }

@keyframes runLine2 {
  0% {
    top: 256px;
    opacity: 0; }
  5% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    top: 166px;
    opacity: 0; } }
          .page .stage.stage3 .platform .lines li:nth-child(3) {
            right: 165px;
            -webkit-animation: runLine3 3s linear infinite;
                    animation: runLine3 3s linear infinite; }

@-webkit-keyframes runLine3 {
  0% {
    top: 200px;
    opacity: 0; }
  5% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    top: 166px;
    opacity: 0; } }

@keyframes runLine3 {
  0% {
    top: 200px;
    opacity: 0; }
  5% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    top: 166px;
    opacity: 0; } }
          .page .stage.stage3 .platform .lines li:nth-child(4) {
            right: 31px;
            -webkit-animation: runLine4 3s linear infinite;
                    animation: runLine4 3s linear infinite; }

@-webkit-keyframes runLine4 {
  0% {
    top: 260px;
    opacity: 0; }
  5% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    top: 166px;
    opacity: 0; } }

@keyframes runLine4 {
  0% {
    top: 260px;
    opacity: 0; }
  5% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    top: 166px;
    opacity: 0; } }
          .page .stage.stage3 .platform .lines li:nth-child(5) {
            bottom: -18px;
            -webkit-animation: runLine5 3s linear infinite;
                    animation: runLine5 3s linear infinite;
            -webkit-transform: rotate(90deg);
                    transform: rotate(90deg); }

@-webkit-keyframes runLine5 {
  0% {
    left: 570px;
    opacity: 0; }
  5% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    left: 90px;
    opacity: 0; } }

@keyframes runLine5 {
  0% {
    left: 570px;
    opacity: 0; }
  5% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    left: 90px;
    opacity: 0; } }
          .page .stage.stage3 .platform .lines li:nth-child(6) {
            bottom: -18px;
            -webkit-animation: runLine6 3s linear infinite;
                    animation: runLine6 3s linear infinite;
            -webkit-transform: rotate(90deg);
                    transform: rotate(90deg); }

@-webkit-keyframes runLine6 {
  0% {
    left: 620px;
    opacity: 0; }
  5% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    left: 1055px;
    opacity: 0; } }

@keyframes runLine6 {
  0% {
    left: 620px;
    opacity: 0; }
  5% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    left: 1055px;
    opacity: 0; } }
          .page .stage.stage3 .platform .lines li:nth-child(7) {
            right: 155px;
            -webkit-animation: runLine7 3s linear infinite;
                    animation: runLine7 3s linear infinite; }

@-webkit-keyframes runLine7 {
  0% {
    top: 580px;
    opacity: 0; }
  5% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    top: 430px;
    opacity: 0; } }

@keyframes runLine7 {
  0% {
    top: 580px;
    opacity: 0; }
  5% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    top: 430px;
    opacity: 0; } }
          .page .stage.stage3 .platform .lines li:nth-child(8) {
            top: 119px;
            -webkit-animation: runLine8 3s linear infinite;
                    animation: runLine8 3s linear infinite;
            -webkit-transform: rotate(90deg);
                    transform: rotate(90deg); }

@-webkit-keyframes runLine8 {
  0% {
    left: 180px;
    opacity: 0; }
  5% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    left: 440px;
    opacity: 0; } }

@keyframes runLine8 {
  0% {
    left: 180px;
    opacity: 0; }
  5% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    left: 440px;
    opacity: 0; } }
      .page .stage.stage3 .platform .titles li {
        position: absolute;
        color: #33fefa;
        font-size: 16px; }
        .page .stage.stage3 .platform .titles li:nth-child(1) {
          left: 67px;
          top: 203px; }
        .page .stage.stage3 .platform .titles li:nth-child(2) {
          left: 334px;
          top: 203px; }
        .page .stage.stage3 .platform .titles li:nth-child(3) {
          left: 515px;
          top: 103px;
          width: 200px;
          text-align: center; }
          .page .stage.stage3 .platform .titles li:nth-child(3) .animateNumber {
            -webkit-transform: scale(0.7);
                    transform: scale(0.7); }
        .page .stage.stage3 .platform .titles li:nth-child(4) {
          right: 297px;
          top: 143px; }
        .page .stage.stage3 .platform .titles li:nth-child(5) {
          right: 144px;
          top: 143px; }
        .page .stage.stage3 .platform .titles li:nth-child(6) {
          right: -9px;
          top: 143px; }
        .page .stage.stage3 .platform .titles li:nth-child(7) {
          right: 6px;
          top: 293px;
          width: 350px;
          text-align: center; }
          .page .stage.stage3 .platform .titles li:nth-child(7) .animateNumber {
            -webkit-transform: scale(0.55);
                    transform: scale(0.55); }
            .page .stage.stage3 .platform .titles li:nth-child(7) .animateNumber span {
              margin: 0;
              width: 30px;
              border: none;
              background-color: transparent; }
              .page .stage.stage3 .platform .titles li:nth-child(7) .animateNumber span.dot {
                width: 10px; }
        .page .stage.stage3 .platform .titles li:nth-child(8) {
          left: 53px;
          bottom: -30px; }
      .page .stage.stage3 .platform .titles .animateNumber {
        display: block;
        vertical-align: middle; }
        .page .stage.stage3 .platform .titles .animateNumber span {
          position: relative;
          display: inline-block;
          margin: 0 5px 0 0;
          width: 36px;
          height: 52px;
          line-height: 52px;
          border: 1px solid rgba(0, 0, 0, 0.5);
          background-color: #0c434a;
          text-align: center;
          font-size: 50px; }
          .page .stage.stage3 .platform .titles .animateNumber span.dot {
            width: 15px;
            border: none;
            background-position-x: -5px;
            background-color: transparent; }
      .page .stage.stage3 .platform .circles li {
        position: absolute;
        padding: 31px;
        background: url("../css/images/page3_circle.png") center/contain no-repeat;
        -webkit-animation: runCircle 8s linear infinite;
                animation: runCircle 8s linear infinite; }

@-webkit-keyframes runCircle {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes runCircle {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }
        .page .stage.stage3 .platform .circles li:nth-child(1) {
          left: 30px;
          top: 63px; }
        .page .stage.stage3 .platform .circles li:nth-child(2) {
          left: 115px;
          top: 49px;
          padding: 26px; }
        .page .stage.stage3 .platform .circles li:nth-child(3) {
          right: 290px;
          top: 66px; }
        .page .stage.stage3 .platform .circles li:nth-child(4) {
          right: 143px;
          top: 66px; }
        .page .stage.stage3 .platform .circles li:nth-child(5) {
          right: 8px;
          top: 66px; }
      .page .stage.stage3 .platform .report {
        position: absolute;
        top: 119px;
        left: 307px;
        width: 86px;
        height: 86px;
        background: url("../css/images/page3_report.png") center no-repeat; }
      .page .stage.stage3 .platform .question {
        position: absolute;
        bottom: 2px;
        left: 49px;
        width: 70px;
        height: 70px;
        border-radius: 35px;
        background: url("../css/images/page3_question.png") center no-repeat;
        -webkit-animation: runQuestion 1s linear infinite alternate;
                animation: runQuestion 1s linear infinite alternate; }

@-webkit-keyframes runQuestion {
  from {
    box-shadow: 0 0 10px #ccc; }
  to {
    box-shadow: 0 0 20px #ccc; } }

@keyframes runQuestion {
  from {
    box-shadow: 0 0 10px #ccc; }
  to {
    box-shadow: 0 0 20px #ccc; } }
      .page .stage.stage3 .platform .core:before {
        content: ' ';
        position: absolute;
        left: 50%;
        bottom: 90px;
        margin-left: -170px;
        width: 311px;
        height: 245px;
        background: url("../css/images/page3_light.png") center no-repeat;
        -webkit-animation: runLight 1s linear infinite alternate;
                animation: runLight 1s linear infinite alternate; }

@-webkit-keyframes runLight {
  from {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }
  to {
    -webkit-transform: scale(0.9);
            transform: scale(0.9); } }

@keyframes runLight {
  from {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }
  to {
    -webkit-transform: scale(0.9);
            transform: scale(0.9); } }
      .page .stage.stage3 .platform .core li {
        position: absolute;
        left: 50%;
        color: #08224f;
        font-size: 16px; }
        .page .stage.stage3 .platform .core li:before {
          content: ' ';
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          -webkit-animation: runCore 3s linear infinite alternate;
                  animation: runCore 3s linear infinite alternate; }

@-webkit-keyframes runCore {
  from {
    -webkit-transform: scale(1);
            transform: scale(1); }
  to {
    -webkit-transform: scale(0.88);
            transform: scale(0.88); } }

@keyframes runCore {
  from {
    -webkit-transform: scale(1);
            transform: scale(1); }
  to {
    -webkit-transform: scale(0.88);
            transform: scale(0.88); } }
        .page .stage.stage3 .platform .core li span {
          position: relative;
          z-index: 1;
          display: block;
          text-align: center; }
        .page .stage.stage3 .platform .core li:nth-child(1) {
          margin-left: -209px;
          bottom: 36px;
          width: 393px;
          height: 139px; }
          .page .stage.stage3 .platform .core li:nth-child(1):before {
            background: url("../css/images/page3_coreBottom.png") center no-repeat;
            -webkit-animation: runCore 5s linear infinite alternate;
                    animation: runCore 5s linear infinite alternate; }
          .page .stage.stage3 .platform .core li:nth-child(1) span {
            margin-top: 40px; }
        .page .stage.stage3 .platform .core li:nth-child(2) {
          margin-left: -137px;
          bottom: 133px;
          width: 247px;
          height: 109px; }
          .page .stage.stage3 .platform .core li:nth-child(2):before {
            background: url("../css/images/page3_core3.png") center no-repeat; }
          .page .stage.stage3 .platform .core li:nth-child(2) span {
            margin-top: 45px; }
        .page .stage.stage3 .platform .core li:nth-child(3) {
          margin-left: -160px;
          bottom: 175px;
          width: 295px;
          height: 124px; }
          .page .stage.stage3 .platform .core li:nth-child(3):before {
            background: url("../css/images/page3_core2.png") center no-repeat; }
          .page .stage.stage3 .platform .core li:nth-child(3) span {
            margin-top: 62px; }
        .page .stage.stage3 .platform .core li:nth-child(4) {
          margin-left: -179px;
          bottom: 215px;
          width: 335px;
          height: 134px; }
          .page .stage.stage3 .platform .core li:nth-child(4):before {
            background: url("../css/images/page3_core1.png") center no-repeat; }
          .page .stage.stage3 .platform .core li:nth-child(4) span {
            margin-top: 52px; }
    .page .stage.stage3 .leftPannel {
      top: 790px;
      left: 100px; }
      .page .stage.stage3 .leftPannel .flexBox > li {
        margin-right: 20px; }
        .page .stage.stage3 .leftPannel .flexBox > li.active .content .flashSquare {
          box-shadow: 0 0 70px rgba(31, 145, 189, 0.4) inset; }
        .page .stage.stage3 .leftPannel .flexBox > li:last-child {
          margin-right: 0; }
        .page .stage.stage3 .leftPannel .flexBox > li .titleBar {
          margin: 0; }
          .page .stage.stage3 .leftPannel .flexBox > li .titleBar:before {
            display: none; }
          .page .stage.stage3 .leftPannel .flexBox > li .titleBar .title {
            width: 306px;
            background-image: url("../css/images/titleBarShort.png");
            background-position: -7px 0; }
        .page .stage.stage3 .leftPannel .flexBox > li .content {
          margin-top: -7px; }
          .page .stage.stage3 .leftPannel .flexBox > li .content .flashSquare {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: end;
                -ms-flex-pack: end;
                    justify-content: flex-end;
            padding: 10px;
            height: 100px;
            border: 1px solid rgba(51, 254, 250, 0.15);
            background: rgba(0, 0, 0, 0.15);
            box-shadow: 0 0 30px rgba(51, 254, 250, 0.15) inset;
            -webkit-transition: all 0.5s;
            transition: all 0.5s;
            color: #33fefa;
            font-size: 36px; }
        .page .stage.stage3 .leftPannel .flexBox > li:nth-child(1) {
          background: url("../css/images/page3_ico1.png") 20px 70px no-repeat; }
        .page .stage.stage3 .leftPannel .flexBox > li:nth-child(2) {
          background: url("../css/images/page3_ico2.png") 20px 70px no-repeat; }
        .page .stage.stage3 .leftPannel .flexBox > li:nth-child(3) {
          background: url("../css/images/page3_ico3.png") 20px 70px no-repeat; }
        .page .stage.stage3 .leftPannel .flexBox > li:nth-child(4) {
          background: url("../css/images/page3_ico4.png") 20px 70px no-repeat; }
    .page .stage.stage3 .rightPannel {
      top: 90px;
      bottom: 0;
      background: #1c2025;
      -webkit-transition: all 1s;
      transition: all 1s;
      right: -100%;
      width: 510px; }
      .page .stage.stage3 .rightPannel.show {
        right: 0; }
      .page .stage.stage3 .rightPannel .titleBar {
        margin: 0; }
        .page .stage.stage3 .rightPannel .titleBar:before {
          display: none; }
      .page .stage.stage3 .rightPannel .content {
        padding: 20px; }
      .page .stage.stage3 .rightPannel.pannel1 .content .charts {
        margin-bottom: 20px; }
        .page .stage.stage3 .rightPannel.pannel1 .content .charts.chart1 {
          height: 400px; }
        .page .stage.stage3 .rightPannel.pannel1 .content .charts.chart2 {
          height: 340px; }
      .page .stage.stage3 .rightPannel.pannel2 .content .charts.chart1 {
        margin-bottom: 20px;
        height: 240px; }
      .page .stage.stage3 .rightPannel.pannel2 .content .charts.chart2 {
        height: 290px; }
      .page .stage.stage3 .rightPannel.pannel2 .content .gjTitle {
        margin-bottom: 10px;
        color: #33fefa;
        font-size: 16px; }
      .page .stage.stage3 .rightPannel.pannel2 .content .stage3Parts {
        position: relative;
        margin-bottom: 13px;
        height: 290px; }
        .page .stage.stage3 .rightPannel.pannel2 .content .stage3Parts .pagination {
          position: absolute;
          right: 5px;
          top: 0;
          z-index: 20; }
          .page .stage.stage3 .rightPannel.pannel2 .content .stage3Parts .pagination .swiper-pagination-switch {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 8px;
            background: #fff;
            margin-right: 5px;
            opacity: 0.8;
            cursor: pointer; }
          .page .stage.stage3 .rightPannel.pannel2 .content .stage3Parts .pagination .swiper-visible-switch {
            background: #214c50; }
          .page .stage.stage3 .rightPannel.pannel2 .content .stage3Parts .pagination .swiper-active-switch {
            background: #33fefa; }
        .page .stage.stage3 .rightPannel.pannel2 .content .stage3Parts .partItem {
          padding: 0; }
          .page .stage.stage3 .rightPannel.pannel2 .content .stage3Parts .partItem div {
            margin: 5px;
            text-align: center;
            font-size: 14px;
            background: #0e2142; }
            .page .stage.stage3 .rightPannel.pannel2 .content .stage3Parts .partItem div p {
              border: 1px solid #2e5476;
              padding: 10px;
              box-shadow: 0 0 10px #103457 inset;
              background: #0e2445;
              color: #33fefa; }
            .page .stage.stage3 .rightPannel.pannel2 .content .stage3Parts .partItem div span {
              display: block;
              padding: 10px;
              color: #fff; }
      .page .stage.stage3 .rightPannel.pannel3 .content .warningNum {
        margin-bottom: 20px; }
      .page .stage.stage3 .rightPannel.pannel3 .content .charts {
        margin-bottom: 15px; }
        .page .stage.stage3 .rightPannel.pannel3 .content .charts.chart1 {
          overflow: auto;
          margin-bottom: 20px; }
          .page .stage.stage3 .rightPannel.pannel3 .content .charts.chart1 .stage3Chart1_1,
          .page .stage.stage3 .rightPannel.pannel3 .content .charts.chart1 .stage3Chart1_2,
          .page .stage.stage3 .rightPannel.pannel3 .content .charts.chart1 .stage3Chart1_3,
          .page .stage.stage3 .rightPannel.pannel3 .content .charts.chart1 .stage3Chart1_4 {
            float: left;
            width: 25%; }
            .page .stage.stage3 .rightPannel.pannel3 .content .charts.chart1 .stage3Chart1_1 .chart,
            .page .stage.stage3 .rightPannel.pannel3 .content .charts.chart1 .stage3Chart1_2 .chart,
            .page .stage.stage3 .rightPannel.pannel3 .content .charts.chart1 .stage3Chart1_3 .chart,
            .page .stage.stage3 .rightPannel.pannel3 .content .charts.chart1 .stage3Chart1_4 .chart {
              position: relative;
              overflow: hidden;
              height: 95px; }
              .page .stage.stage3 .rightPannel.pannel3 .content .charts.chart1 .stage3Chart1_1 .chart:before,
              .page .stage.stage3 .rightPannel.pannel3 .content .charts.chart1 .stage3Chart1_2 .chart:before,
              .page .stage.stage3 .rightPannel.pannel3 .content .charts.chart1 .stage3Chart1_3 .chart:before,
              .page .stage.stage3 .rightPannel.pannel3 .content .charts.chart1 .stage3Chart1_4 .chart:before {
                content: ' ';
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                -webkit-animation: animateChart3Bg 5s linear infinite;
                        animation: animateChart3Bg 5s linear infinite; }
            .page .stage.stage3 .rightPannel.pannel3 .content .charts.chart1 .stage3Chart1_1 p,
            .page .stage.stage3 .rightPannel.pannel3 .content .charts.chart1 .stage3Chart1_2 p,
            .page .stage.stage3 .rightPannel.pannel3 .content .charts.chart1 .stage3Chart1_3 p,
            .page .stage.stage3 .rightPannel.pannel3 .content .charts.chart1 .stage3Chart1_4 p {
              text-align: center;
              color: #fff; }
          .page .stage.stage3 .rightPannel.pannel3 .content .charts.chart1 .stage3Chart1_1 .chart:before {
            background: url("../css/images/page2_chart3_1.png") center no-repeat; }
          .page .stage.stage3 .rightPannel.pannel3 .content .charts.chart1 .stage3Chart1_2 .chart:before {
            background: url("../css/images/page2_chart3_2.png") center no-repeat; }
          .page .stage.stage3 .rightPannel.pannel3 .content .charts.chart1 .stage3Chart1_3 .chart:before {
            background: url("../css/images/page2_chart3_3.png") center no-repeat; }
          .page .stage.stage3 .rightPannel.pannel3 .content .charts.chart1 .stage3Chart1_4 .chart:before {
            background: url("../css/images/page2_chart3_4.png") center no-repeat; }
        .page .stage.stage3 .rightPannel.pannel3 .content .charts.chart2 {
          height: 300px; }
        .page .stage.stage3 .rightPannel.pannel3 .content .charts.chart3 {
          height: 280px; }
      .page .stage.stage3 .rightPannel .button {
        background: #0c434a; }
  .page .stage.stage4 {
    opacity: 0;
    z-index: -1;
    background: url("../css/images/page4_bg.png") left no-repeat;
    -webkit-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out; }
    .page .stage.stage4 .Company_information {
      position: relative;
      margin: 115px 0 0 65px;
      width: 850px; }
      .page .stage.stage4 .Company_information .company_head .logo_head {
        position: absolute; }
        .page .stage.stage4 .Company_information .company_head .logo_head li:nth-child(1) {
          height: 80px;
          width: 80px;
          background: url("../css/images/page4logo.png") no-repeat;
          float: left; }
        .page .stage.stage4 .Company_information .company_head .logo_head li:nth-child(2) {
          height: 80px;
          width: 80px;
          background: url("../css/images/page4logo_bg.png") no-repeat; }
      .page .stage.stage4 .Company_information .company_head .text_head {
        position: absolute;
        left: 90px; }
        .page .stage.stage4 .Company_information .company_head .text_head li {
          left: 50px;
          color: #ffffff;
          font-size: 16px; }
          .page .stage.stage4 .Company_information .company_head .text_head li:nth-child(1) {
            font-size: 25px; }
          .page .stage.stage4 .Company_information .company_head .text_head li:nth-child(2) {
            margin-top: 5px; }
          .page .stage.stage4 .Company_information .company_head .text_head li:nth-child(3) {
            margin-top: 5px;
            width: 45px;
            float: left;
            margin-right: 5px;
            background-color: #57dd94; }
          .page .stage.stage4 .Company_information .company_head .text_head li:nth-child(4) {
            margin-top: 5px;
            width: 70px;
            float: left;
            margin-right: 5px;
            background-color: #FD482C; }
          .page .stage.stage4 .Company_information .company_head .text_head li:nth-child(5) {
            margin-top: 5px;
            width: 100px;
            float: left;
            background-color: #eb3962; }
      .page .stage.stage4 .Company_information .more {
        float: right; }
        .page .stage.stage4 .Company_information .more .moreinfo li:nth-child(1) {
          width: 100px;
          color: #ffffff;
          text-align: center;
          background: #2e5476;
          float: left; }
          .page .stage.stage4 .Company_information .more .moreinfo li:nth-child(1):before {
            content: ' ';
            position: absolute;
            margin-top: 2px;
            margin-left: -8px;
            width: 20px;
            height: 20px;
            background: url("../css/images/page4_download.png") center no-repeat; }
          .page .stage.stage4 .Company_information .more .moreinfo li:nth-child(1) span {
            margin-left: 15px; }
        .page .stage.stage4 .Company_information .more .moreinfo li:nth-child(2) {
          width: 80px;
          color: #ffffff;
          text-align: center;
          background: #2e5476;
          float: left;
          margin-left: 10px; }
          .page .stage.stage4 .Company_information .more .moreinfo li:nth-child(2):before {
            content: ' ';
            position: absolute;
            margin-top: 2px;
            margin-left: -10px;
            width: 20px;
            height: 20px;
            background: url("../css/images/page4_heart.png") center no-repeat; }
          .page .stage.stage4 .Company_information .more .moreinfo li:nth-child(2) span {
            margin-left: 15px; }
    .page .stage.stage4 .leftPannel {
      top: 100px;
      left: 30px;
      width: 850px; }
      .page .stage.stage4 .leftPannel .left_titles {
        top: -50px;
        height: 500px;
        position: relative; }
        .page .stage.stage4 .leftPannel .left_titles .page4_titles {
          position: relative;
          z-index: 3; }
          .page .stage.stage4 .leftPannel .left_titles .page4_titles li {
            position: absolute;
            color: #ffffff;
            font-size: 16px;
            -webkit-animation: circleDataBlock 8s ease-in-out infinite;
                    animation: circleDataBlock 8s ease-in-out infinite; }
            .page .stage.stage4 .leftPannel .left_titles .page4_titles li .animateNumber1 {
              margin-left: 18px; }
            .page .stage.stage4 .leftPannel .left_titles .page4_titles li:nth-child(1) {
              left: 185px;
              top: 215px;
              color: #57dd94; }
            .page .stage.stage4 .leftPannel .left_titles .page4_titles li:nth-child(2) {
              left: 110px;
              top: 355px; }
            .page .stage.stage4 .leftPannel .left_titles .page4_titles li:nth-child(3) {
              left: 185px;
              top: 490px; }
            .page .stage.stage4 .leftPannel .left_titles .page4_titles li:nth-child(4) {
              right: 160px;
              top: 215px; }
            .page .stage.stage4 .leftPannel .left_titles .page4_titles li:nth-child(5) {
              right: 110px;
              top: 355px; }
            .page .stage.stage4 .leftPannel .left_titles .page4_titles li:nth-child(6) {
              right: 160px;
              top: 490px; }
            .page .stage.stage4 .leftPannel .left_titles .page4_titles li:nth-child(7) {
              -webkit-animation-play-state: paused;
                      animation-play-state: paused; }
              .page .stage.stage4 .leftPannel .left_titles .page4_titles li:nth-child(7) p {
                font-size: 20px;
                margin-left: 400px;
                margin-top: 400px; }
              .page .stage.stage4 .leftPannel .left_titles .page4_titles li:nth-child(7) span {
                display: block;
                font-size: 50px;
                font-weight: bold;
                margin-left: 400px;
                margin-top: -100px; }
        .page .stage.stage4 .leftPannel .left_titles .blocks {
          position: relative; }

@-webkit-keyframes circleDataBlock {
  0% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    opacity: 1; }
  50% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }
  100% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    opacity: 1; } }

@keyframes circleDataBlock {
  0% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    opacity: 1; }
  50% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }
  100% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    opacity: 1; } }
          .page .stage.stage4 .leftPannel .left_titles .blocks li {
            -webkit-animation: circleDataBlock 8s ease-in-out infinite;
                    animation: circleDataBlock 8s ease-in-out infinite;
            position: absolute;
            width: 130px;
            height: 85px;
            background: url("../css/images/page4_titles.png") center/contain no-repeat; }
            .page .stage.stage4 .leftPannel .left_titles .blocks li:nth-child(1) {
              left: 150px;
              top: 200px; }
            .page .stage.stage4 .leftPannel .left_titles .blocks li:nth-child(2) {
              left: 80px;
              top: 340px; }
            .page .stage.stage4 .leftPannel .left_titles .blocks li:nth-child(3) {
              left: 150px;
              top: 475px; }
            .page .stage.stage4 .leftPannel .left_titles .blocks li:nth-child(4) {
              right: 125px;
              top: 200px; }
            .page .stage.stage4 .leftPannel .left_titles .blocks li:nth-child(5) {
              right: 80px;
              top: 340px; }
            .page .stage.stage4 .leftPannel .left_titles .blocks li:nth-child(6) {
              right: 125px;
              top: 475px; }
        .page .stage.stage4 .leftPannel .left_titles .page4_radar {
          position: relative; }
          .page .stage.stage4 .leftPannel .left_titles .page4_radar li:nth-child(1) {
            position: absolute;
            height: 400px;
            width: 400px;
            top: 260px;
            left: 310px;
            background: url("../css/images/page4_radar01.png") no-repeat; }
          .page .stage.stage4 .leftPannel .left_titles .page4_radar li:nth-child(2) {
            position: absolute;
            left: -55px;
            top: -60px;
            height: 700px;
            width: 700px;
            background: url("../css/images/radar02.png") no-repeat;
            -webkit-animation: animateChart4Rd 6s linear infinite;
                    animation: animateChart4Rd 6s linear infinite;
            -webkit-transform-origin: 485px 440px;
                    transform-origin: 485px 440px; }

@-webkit-keyframes animateChart4Rd {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes animateChart4Rd {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }
          .page .stage.stage4 .leftPannel .left_titles .page4_radar li:nth-child(3) {
            position: absolute;
            margin-left: 325px;
            margin-top: 280px;
            height: 420px;
            width: 400px;
            background: url("../css/images/page4_rader03.png") no-repeat; }
        .page .stage.stage4 .leftPannel .left_titles .page4_core:before {
          content: ' ';
          position: absolute;
          margin-top: 380px;
          margin-left: 280px;
          width: 311px;
          height: 245px;
          background: url("../css/images/page3_light.png") center no-repeat;
          -webkit-animation: runLight 2s linear infinite alternate;
                  animation: runLight 2s linear infinite alternate; }
        .page .stage.stage4 .leftPannel .left_titles .page4_core li {
          position: absolute;
          margin-top: 580px;
          margin-left: 240px;
          width: 393px;
          height: 100px;
          background: url("../css/images/page3_coreBottom.png") center no-repeat; }
      .page .stage.stage4 .leftPannel .left_bot {
        height: 40px;
        margin-top: 150px;
        margin-left: 50px; }
        .page .stage.stage4 .leftPannel .left_bot .charts.chart2 {
          top: -10px;
          margin-left: 50px; }
    .page .stage.stage4 .page4_right {
      top: 120px;
      bottom: 0;
      -webkit-transition: all 1s;
      transition: all 1s;
      right: -100%;
      width: 910px;
      z-index: 2; }
      .page .stage.stage4 .page4_right.show {
        right: 0; }
      .page .stage.stage4 .page4_right.rightPage1 {
        position: absolute;
        margin-top: -40px; }
        .page .stage.stage4 .page4_right.rightPage1 .titleBar {
          margin-left: -40px; }
        .page .stage.stage4 .page4_right.rightPage1 .back {
          height: 30px;
          width: 100px;
          background: #2e5476;
          text-align: right;
          font-size: 17px;
          color: #ffffff;
          margin-left: 800px;
          margin-top: -30px;
          padding-top: 5px; }
          .page .stage.stage4 .page4_right.rightPage1 .back:before {
            content: ' ';
            position: absolute;
            left: 50%;
            margin-top: 2px;
            margin-left: 350px;
            width: 20px;
            height: 20px;
            background: url("../css/images/page4_back.png") center no-repeat; }
        .page .stage.stage4 .page4_right.rightPage1 .tab {
          margin-top: 10px;
          height: 40px; }
          .page .stage.stage4 .page4_right.rightPage1 .tab .tab_titles li {
            height: 30px;
            width: 90px;
            float: left;
            margin-left: 6px;
            border: solid 1px cadetblue;
            text-align: center; }
            .page .stage.stage4 .page4_right.rightPage1 .tab .tab_titles li a {
              text-decoration: none;
              color: #33fefa;
              font-size: 17px; }
          .page .stage.stage4 .page4_right.rightPage1 .tab .tab_titles .selected {
            background-color: #0cf8ff; }
            .page .stage.stage4 .page4_right.rightPage1 .tab .tab_titles .selected a {
              color: #212121; }
        .page .stage.stage4 .page4_right.rightPage1 .business .rightPannel_head1 {
          font-size: 17px; }
          .page .stage.stage4 .page4_right.rightPage1 .business .rightPannel_head1 ul li:nth-child(1) {
            color: #33fefa;
            float: left; }
          .page .stage.stage4 .page4_right.rightPage1 .business .rightPannel_head1 ul li:nth-child(2) {
            float: right; }
            .page .stage.stage4 .page4_right.rightPage1 .business .rightPannel_head1 ul li:nth-child(2) a {
              color: #0f53ff; }
        .page .stage.stage4 .page4_right.rightPage1 .business .business_list {
          margin-top: 5px;
          width: 940px;
          height: 340px;
          color: #ffffff;
          border-collapse: collapse; }
          .page .stage.stage4 .page4_right.rightPage1 .business .business_list tr td {
            text-align: left;
            padding-left: 10px;
            height: 40px;
            width: 20px;
            font-size: 17px;
            word-break: keep-all;
            border: 1px solid cadetblue; }
          .page .stage.stage4 .page4_right.rightPage1 .business .business_list tr .list1 {
            width: 60px;
            background-color: #073c42;
            color: #33fefa; }
          .page .stage.stage4 .page4_right.rightPage1 .business .business_list tr .list2 {
            height: 80px;
            word-break: keep-all; }
        .page .stage.stage4 .page4_right.rightPage1 .shareholder .rightPannel_head2 p {
          margin-top: 5px;
          color: #33fefa;
          font-size: 17px; }
        .page .stage.stage4 .page4_right.rightPage1 .shareholder .shareholder_list {
          margin-top: 5px;
          border-collapse: collapse; }
          .page .stage.stage4 .page4_right.rightPage1 .shareholder .shareholder_list .shareholder_head tr {
            height: 20px;
            width: auto;
            background-color: #073c42; }
            .page .stage.stage4 .page4_right.rightPage1 .shareholder .shareholder_list .shareholder_head tr td {
              text-align: center;
              font-size: 17px;
              color: #33fefa; }
          .page .stage.stage4 .page4_right.rightPage1 .shareholder .shareholder_list .shareholder_body {
            color: #ffffff;
            height: 350px; }
            .page .stage.stage4 .page4_right.rightPage1 .shareholder .shareholder_list .shareholder_body tr td {
              text-align: center;
              font-size: 17px;
              width: 135px;
              height: 40px;
              border: 1px solid cadetblue; }
            .page .stage.stage4 .page4_right.rightPage1 .shareholder .shareholder_list .shareholder_body tr .list3 {
              width: 450px;
              height: 40px;
              text-align: left;
              padding-left: 5px; }
            .page .stage.stage4 .page4_right.rightPage1 .shareholder .shareholder_list .shareholder_body tr .list4 {
              width: 80px; }
      .page .stage.stage4 .page4_right.rightPage2 {
        position: absolute;
        margin-top: -50px; }
        .page .stage.stage4 .page4_right.rightPage2 .titleBar .title {
          margin-left: -30px; }
        .page .stage.stage4 .page4_right.rightPage2 .right_1 {
          float: left;
          margin-top: 20px; }
          .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .area1_head {
            margin-left: 100px;
            height: 30px;
            width: 300px;
            background: url("../css/images/key_img_03.png") no-repeat; }
          .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .charts.chart1 {
            overflow: auto;
            margin-top: -50px;
            width: 400px; }
            .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .charts.chart1 .stage4Chart1_1,
            .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .charts.chart1 .stage4Chart1_2,
            .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .charts.chart1 .stage4Chart1_3 {
              float: left;
              width: 90px;
              margin-left: 40px; }
              .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .charts.chart1 .stage4Chart1_1 .chart,
              .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .charts.chart1 .stage4Chart1_2 .chart,
              .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .charts.chart1 .stage4Chart1_3 .chart {
                position: relative;
                overflow: hidden;
                height: 95px; }
                .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .charts.chart1 .stage4Chart1_1 .chart:before,
                .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .charts.chart1 .stage4Chart1_2 .chart:before,
                .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .charts.chart1 .stage4Chart1_3 .chart:before {
                  content: ' ';
                  position: absolute;
                  left: 0;
                  top: 0;
                  width: 100%;
                  height: 100%;
                  -webkit-animation: animateChart3Bg 5s linear infinite;
                          animation: animateChart3Bg 5s linear infinite; }
              .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .charts.chart1 .stage4Chart1_1 p,
              .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .charts.chart1 .stage4Chart1_2 p,
              .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .charts.chart1 .stage4Chart1_3 p {
                text-align: center;
                color: #fff; }
            .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .charts.chart1 .stage4Chart1_1 .chart:before {
              background: url("../css/images/page2_chart3_1.png") center no-repeat; }
            .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .charts.chart1 .stage4Chart1_2 .chart:before {
              background: url("../css/images/page2_chart3_2.png") center no-repeat; }
            .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .charts.chart1 .stage4Chart1_3 .chart:before {
              background: url("../css/images/page2_chart3_3.png") center no-repeat; }
          .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .charts.chart5 {
            margin-top: -20px;
            width: 500px;
            height: 260px;
            position: relative; }
            .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .charts.chart5 .stage4_num1 {
              position: absolute;
              margin-top: -220px;
              margin-left: 100px;
              color: #33fefa;
              font-size: 20px; }
            .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .charts.chart5 .stage4_num2 {
              position: absolute;
              margin-top: -170px;
              margin-left: 145px;
              color: #33fefa;
              font-size: 20px; }
            .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .charts.chart5 .stage4_num3 {
              position: absolute;
              margin-top: -120px;
              margin-left: 145px;
              color: #33fefa;
              font-size: 20px; }
            .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .charts.chart5 .stage4_percentup1 {
              position: absolute;
              margin-top: -220px;
              margin-left: 300px;
              color: #33fefa;
              font-size: 20px; }
              .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .charts.chart5 .stage4_percentup1:before {
                content: '';
                position: absolute;
                width: 100px;
                height: 100px;
                margin-left: 75px;
                margin-top: 3px;
                background: url("../css/images/arrow01.png") no-repeat; }
            .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .charts.chart5 .stage4_percentup2 {
              position: absolute;
              margin-top: -170px;
              margin-left: 300px;
              color: #33fefa;
              font-size: 20px; }
              .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .charts.chart5 .stage4_percentup2:before {
                content: '';
                position: absolute;
                width: 100px;
                height: 100px;
                margin-left: 75px;
                margin-top: 5px;
                background: url("../css/images/arrow02.png") no-repeat; }
            .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .charts.chart5 .stage4_percentup3 {
              position: absolute;
              margin-top: -120px;
              margin-left: 300px;
              color: #33fefa;
              font-size: 20px; }
              .page .stage.stage4 .page4_right.rightPage2 .right_1 .area1 .charts.chart5 .stage4_percentup3:before {
                content: '';
                position: absolute;
                width: 100px;
                height: 100px;
                margin-left: 75px;
                margin-top: 5px;
                background: url("../css/images/arrow03.png") no-repeat; }
          .page .stage.stage4 .page4_right.rightPage2 .right_1 .area2 .area2_head {
            margin-left: 100px;
            margin-top: 40px;
            height: 30px;
            width: 300px;
            background: url("../css/images/rs_img.png") no-repeat; }
          .page .stage.stage4 .page4_right.rightPage2 .right_1 .area2 .charts.chart6 {
            margin-top: -30px;
            margin-left: -30px;
            height: 500px;
            width: 500px; }
        .page .stage.stage4 .page4_right.rightPage2 .right_2 {
          width: 410px;
          overflow: hidden; }
          .page .stage.stage4 .page4_right.rightPage2 .right_2 .area3 .area3_head {
            margin-left: 100px;
            margin-top: 25px;
            height: 30px;
            width: 300px;
            background: url("../css/images/key_img_06.png") no-repeat; }
          .page .stage.stage4 .page4_right.rightPage2 .right_2 .area3 .charts.chart4 {
            height: 300px;
            width: 400px; }
          .page .stage.stage4 .page4_right.rightPage2 .right_2 .area4 .area4_head {
            margin-left: 100px;
            margin-top: 45px;
            height: 30px;
            width: 300px;
            background: url("../css/images/key_img_11.png") no-repeat; }
          .page .stage.stage4 .page4_right.rightPage2 .right_2 .area4 #stage4_map {
            overflow: hidden;
            margin-top: 30px;
            margin-left: -10px;
            height: 400px;
            width: 400px; }
  .page .stage.stage5 {
    z-index: -1;
    -webkit-transition: all 2s;
    transition: all 2s; }
    .page .stage.stage5 .topTitle {
      top: -100%; }
    .page .stage.stage5 .titleBar {
      margin: 0; }
      .page .stage.stage5 .titleBar:before {
        display: none; }
      .page .stage.stage5 .titleBar .title {
        width: 483px;
        background-image: url("../css/images/titleBarShort2.png");
        background-position: -7px 0; }
    .page .stage.stage5 .content {
      padding: 20px; }
      .page .stage.stage5 .content .charts.chart1 {
        height: 410px; }
        .page .stage.stage5 .content .charts.chart1 .avgScore {
          position: absolute;
          left: 0;
          top: 0;
          color: #fff;
          font-size: 18px; }
          .page .stage.stage5 .content .charts.chart1 .avgScore span {
            color: #33fefa;
            font-style: italic;
            font-size: 36px; }
      .page .stage.stage5 .content .charts.chart2 {
        height: 410px; }
      .page .stage.stage5 .content .charts.chart3 {
        height: 380px; }
      .page .stage.stage5 .content .charts.chart4 {
        height: 360px; }
    .page .stage.stage5 .leftPannel,
    .page .stage.stage5 .rightPannel {
      top: 115px;
      background: rgba(28, 32, 37, 0.8);
      -webkit-transition: all 1s linear;
      transition: all 1s linear; }
    .page .stage.stage5 .leftPannel {
      left: -100%; }
    .page .stage.stage5 .rightPannel {
      right: -100%; }
      .page .stage.stage5 .rightPannel .button {
        background: #0c434a; }
  .page .stage.stage6 .topTitle {
    top: -100%; }
  .page .stage.stage6 .topPannel {
    top: -100%;
    padding: 40px; }
    .page .stage.stage6 .topPannel li {
      margin-right: 15px;
      font-size: 18px;
      color: #fff; }
      .page .stage.stage6 .topPannel li:last-child {
        margin-right: 0; }
      .page .stage.stage6 .topPannel li h5 {
        line-height: 1;
        padding-bottom: 15px; }
      .page .stage.stage6 .topPannel li .flashSquare {
        padding: 10px 20px;
        background: url("../css/images/page5_numsBg.gif") repeat; }
        .page .stage.stage6 .topPannel li .flashSquare .top {
          top: 2px;
          left: 2px; }
        .page .stage.stage6 .topPannel li .flashSquare .bottom {
          bottom: 2px;
          right: 2px; }
        .page .stage.stage6 .topPannel li .flashSquare .left {
          bottom: 2px;
          left: 2px; }
        .page .stage.stage6 .topPannel li .flashSquare .right {
          top: 2px;
          right: 2px; }
        .page .stage.stage6 .topPannel li .flashSquare .numBox {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center; }
          .page .stage.stage6 .topPannel li .flashSquare .numBox .num {
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
            color: #33fefa;
            font-size: 48px; }
            .page .stage.stage6 .topPannel li .flashSquare .numBox .num b {
              color: #fff;
              font-size: 16px; }
          .page .stage.stage6 .topPannel li .flashSquare .numBox .percent {
            color: #fff; }
  .page .stage.stage6 .leftPannel,
  .page .stage.stage6 .rightPannel {
    top: 200px;
    background: rgba(28, 32, 37, 0.8);
    -webkit-transition: all 1s linear;
    transition: all 1s linear; }
    .page .stage.stage6 .leftPannel .titleBar,
    .page .stage.stage6 .rightPannel .titleBar {
      margin: 0; }
      .page .stage.stage6 .leftPannel .titleBar:before,
      .page .stage.stage6 .rightPannel .titleBar:before {
        display: none; }
      .page .stage.stage6 .leftPannel .titleBar .title,
      .page .stage.stage6 .rightPannel .titleBar .title {
        width: 483px;
        background-image: url("../css/images/titleBarShort2.png");
        background-position: -7px 0; }
    .page .stage.stage6 .leftPannel .content,
    .page .stage.stage6 .rightPannel .content {
      padding: 10px; }
      .page .stage.stage6 .leftPannel .content .charts.chart1,
      .page .stage.stage6 .rightPannel .content .charts.chart1 {
        height: 365px; }
        .page .stage.stage6 .leftPannel .content .charts.chart1 .avgScore,
        .page .stage.stage6 .rightPannel .content .charts.chart1 .avgScore {
          position: absolute;
          left: 0;
          top: 0;
          color: #fff;
          font-size: 18px; }
          .page .stage.stage6 .leftPannel .content .charts.chart1 .avgScore span,
          .page .stage.stage6 .rightPannel .content .charts.chart1 .avgScore span {
            color: #33fefa;
            font-style: italic;
            font-size: 36px; }
      .page .stage.stage6 .leftPannel .content .charts.chart2,
      .page .stage.stage6 .rightPannel .content .charts.chart2 {
        height: 340px; }
      .page .stage.stage6 .leftPannel .content .charts.chart3,
      .page .stage.stage6 .rightPannel .content .charts.chart3 {
        height: 330px; }
      .page .stage.stage6 .leftPannel .content .charts.chart4,
      .page .stage.stage6 .rightPannel .content .charts.chart4 {
        height: 340px; }
  .page .stage.stage6 .leftPannel {
    left: -100%; }
  .page .stage.stage6 .rightPannel {
    right: -100%; }
    .page .stage.stage6 .rightPannel .button {
      background: #0c434a; }
  .page .stage.stage7 {
    opacity: 0;
    z-index: -1;
    -webkit-transition: all 1s;
    transition: all 1s;
    background: url("../css/images/page6_bg.png") center no-repeat; }
    .page .stage.stage7 .topTitle {
      top: -100%; }
    .page .stage.stage7 .leftPannel {
      top: 125px;
      left: 20px;
      right: 20px; }
      .page .stage.stage7 .leftPannel .flexBox > li {
        margin-right: 30px; }
        .page .stage.stage7 .leftPannel .flexBox > li:last-child {
          margin-right: 0; }
        .page .stage.stage7 .leftPannel .flexBox > li.active .content .flashSquare {
          box-shadow: 0 0 70px rgba(31, 145, 189, 0.4) inset; }
        .page .stage.stage7 .leftPannel .flexBox > li .titleBar {
          margin: 0; }
          .page .stage.stage7 .leftPannel .flexBox > li .titleBar:before {
            display: none; }
          .page .stage.stage7 .leftPannel .flexBox > li .titleBar .title {
            width: 100%;
            background-image: url("../css/images/titleBarShort.png");
            background-position: -7px 0; }
        .page .stage.stage7 .leftPannel .flexBox > li .content {
          margin-top: -7px; }
          .page .stage.stage7 .leftPannel .flexBox > li .content .flashSquare {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: end;
                -ms-flex-pack: end;
                    justify-content: flex-end;
            padding: 10px;
            height: 100px;
            border: 1px solid rgba(51, 254, 250, 0.15);
            background: rgba(0, 0, 0, 0.15);
            box-shadow: 0 0 30px rgba(51, 254, 250, 0.15) inset;
            -webkit-transition: all 0.5s;
            transition: all 0.5s;
            color: #33fefa;
            font-size: 36px;
            cursor: pointer; }
            .page .stage.stage7 .leftPannel .flexBox > li .content .flashSquare .nums {
              line-height: 1.15;
              font-family: "MicrosoftYaHei Bold"; }
              .page .stage.stage7 .leftPannel .flexBox > li .content .flashSquare .nums b {
                margin-top: -5px;
                display: block;
                font-size: 24px; }
        .page .stage.stage7 .leftPannel .flexBox > li:nth-child(1) {
          background: url("../css/images/page7_ico1.png") 20px 70px no-repeat; }
        .page .stage.stage7 .leftPannel .flexBox > li:nth-child(2) {
          background: url("../css/images/page7_ico2.png") 20px 70px no-repeat; }
          .page .stage.stage7 .leftPannel .flexBox > li:nth-child(2) .nums {
            color: #f92f5e; }
        .page .stage.stage7 .leftPannel .flexBox > li:nth-child(3) {
          background: url("../css/images/page7_ico3.png") 20px 70px no-repeat; }
        .page .stage.stage7 .leftPannel .flexBox > li:nth-child(4) {
          background: url("../css/images/page7_ico4.png") 20px 70px no-repeat; }
        .page .stage.stage7 .leftPannel .flexBox > li:nth-child(5) {
          background: url("../css/images/page7_ico5.png") 20px 70px no-repeat; }
        .page .stage.stage7 .leftPannel .flexBox > li:nth-child(6) {
          background: url("../css/images/page7_ico6.png") 20px 70px no-repeat; }
    .page .stage.stage7 .dashBoard {
      margin-top: 300px; }
      .page .stage.stage7 .dashBoard .flexBox {
        margin-bottom: 20px; }
        .page .stage.stage7 .dashBoard .flexBox li {
          margin: 20px; }
          .page .stage.stage7 .dashBoard .flexBox li .info {
            overflow: hidden;
            padding: 0 0 5px;
            color: #fff; }
            .page .stage.stage7 .dashBoard .flexBox li .info .diff {
              color: #33fefa;
              font-size: 18px; }
            .page .stage.stage7 .dashBoard .flexBox li .info .right {
              float: right; }
          .page .stage.stage7 .dashBoard .flexBox li .charts {
            height: 200px; }

.page .alert {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transition: all 2s;
  transition: all 2s;
  -webkit-transform: translate(-35%, -100%);
          transform: translate(-35%, -100%);
  padding: 25px 15px 35px 25px;
  width: 341px;
  height: 211px;
  background: url("../css/images/page5_alert.png") no-repeat;
  color: #fff;
  font-size: 14px; }
  .page .alert .close {
    position: absolute;
    right: 20px;
    top: 20px;
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border: 1px solid #58a19e;
    border-radius: 50%;
    text-align: center;
    color: #58a19e; }
    .page .alert .close:hover {
      border-color: #fff;
      color: #fff; }
  .page .alert h3 {
    padding-bottom: 5px;
    color: #eede3f;
    font-size: 14px; }
  .page .alert p {
    padding-bottom: 5px; }
  .page .alert .tags {
    overflow: auto;
    padding-bottom: 5px; }
    .page .alert .tags .tag {
      margin: 0 5px 0 0;
      padding: 2px 5px;
      color: #fff; }
      .page .alert .tags .tag:nth-child(odd) {
        background: #db486a; }
      .page .alert .tags .tag:nth-child(even) {
        background: #ff5858; }
  .page .alert .detail {
    color: #48a3f0;
    cursor: pointer; }
